<template>
    <!--  整个视频播放以及控制区域的容器-->
    <el-container style="height: 788px;">
        <el-aside style='background-color: white; width: 200px;'>
            <el-main>
                <el-row>
                    <!--                    <el-col :span='10' style="text-align: right;">云台操作</el-col>-->
                    <!--                    <el-button size="medium" round type="primary"> 云台操作</el-button>-->
                    <org-tree style="height: 100%;" @node-click="handleNodeClick"/>
                </el-row>
            </el-main>
        </el-aside>
        <!--            视频播放区域以及下面的控制窗口数量的工具栏-->
        <el-container style="height: 100%; background-color: black; overflow: hidden;">
            <!--      视频播放区域-->
            <el-main
                style='height: 100%; padding: 0; border: 2px solid green; overflow: hidden; background-color: black;'
                ref='videoPlugin1'>
                <div style='height: 100%; width: 100%; overflow: hidden; background-color: black;'
                     id='videoPlugin'></div>
            </el-main>
            <!--      控制窗口数量的工具栏-->
            <el-footer height='10%' style='background-color: black;'>
                <el-row style='padding-top: 4px;'>
                    <el-col :span='1'><img src='../../assets/images/宫格1.png' @click='setWinNum(1)'></el-col>
                    <el-col :span='1'><img src='../../assets/images/宫格4.png' @click='setWinNum(4)'></el-col>
                    <el-col :span='1'><img src='../../assets/images/九宫格.png' @click='setWinNum(9)'></el-col>
                    <el-col :span='1'><img src='../../assets/images/全屏.png' @click='fullScreen'></el-col>
                </el-row>
            </el-footer>
        </el-container>
        <!--    侧边栏，主要是摄像头的操作区域，如云台控制-->
        <el-aside width=null class="aside-container">
            <!--      云台操作容器-->
            <el-main style='padding: 0;'>
                <!--        方向盘容器-->
                <!--        <el-main style='background-color: #55a532;height: 100%;padding: 0px'>-->
                <!--          云台标题-->
                <!--        标题栏-->
                <el-row class='menu-title'>
                    <el-col class='el-icon-help' type="flex" align="middle" :span='3'></el-col>
                    <el-col :span='9' style="text-align: right;">云台操作</el-col>
                </el-row>
                <!--     云台控制面板容器     -->
                <el-main class='steering-wheel-container'>
                    <!--                    大圆环-->
                    <el-main class="circular-ring">
                        <!--                        大圆环中间的方块-->
                        <el-main class="direction-container">
                            <el-main class="direction-container-row">
                                <el-main class='direction-container-column'>
                                    <el-button circle size='mini' class='direction-btn'

                                               @mousedown.native='mouseDownPTZControl( $event,"左上","start")'
                                               @mouseup.native='mouseDownPTZControl($event,"左上","end")'
                                               @mouseleave.native='mouseLeave($event)'>
                                        <i class='el-icon-caret-top'
                                           style='transform: rotate(-45deg); color: white;'></i>
                                    </el-button>
                                </el-main>
                                <el-main class='direction-container-column'>
                                    <el-button circle size='mini' class='direction-btn'

                                               @mousedown.native='mouseDownPTZControl($event,"上","start")'
                                               @mouseup.native='mouseDownPTZControl($event,"上","end")'
                                               @mouseleave.native='mouseLeave($event)'>
                                        <i class='el-icon-caret-top' style=' color: white;'></i>
                                    </el-button>
                                </el-main>
                                <el-main class='direction-container-column'>
                                    <el-button circle size='mini' class='direction-btn'

                                               @mousedown.native='mouseDownPTZControl($event,"右上","start")'
                                               @mouseup.native='mouseDownPTZControl($event,"右上","end")'
                                               @mouseleave.native='mouseLeave($event)'>
                                        <i class='el-icon-caret-top'
                                           style='transform: rotate(45deg); color: white;'></i>
                                    </el-button>
                                </el-main>
                            </el-main>
                            <!--                            中间行方向-->
                            <el-main class="direction-container-row">
                                <el-main class='direction-container-column'>
                                    <el-button circle size='mini' class='direction-btn'
                                               @mousedown.native='mouseDownPTZControl($event,"左","start")'
                                               @mouseup.native='mouseDownPTZControl($event,"左","end")'
                                               @mouseleave.native='mouseLeave($event)'>
                                        <i class='el-icon-caret-left' style=' color: white;'></i>
                                    </el-button>
                                </el-main>
                                <el-main class='direction-container-column'>
                                    <el-main class="center-img-container">
                                        <img src='../../assets/images/循环.png' class="center-img">
                                    </el-main>
                                </el-main>
                                <el-main class='direction-container-column'>
                                    <el-button circle size='mini' class='direction-btn'
                                               @mousedown.native='mouseDownPTZControl($event,"右","start")'
                                               @mouseup.native='mouseDownPTZControl($event,"右","end")'
                                               @mouseleave.native='mouseLeave($event)'>
                                        <i class='el-icon-caret-right' style=' color: white;'></i>
                                    </el-button>
                                </el-main>
                            </el-main>
                            <!--                                第三行方向-->
                            <el-main class="direction-container-row">
                                <el-main class='direction-container-column'>
                                    <el-button circle size='mini' class='direction-btn'

                                               @mousedown.native='mouseDownPTZControl($event,"左下","start")'
                                               @mouseup.native='mouseDownPTZControl($event,"左下","end")'
                                               @mouseleave.native='mouseLeave($event)'>
                                        <i class='el-icon-caret-left'
                                           style='transform: rotate(-45deg); color: white;'></i>
                                    </el-button>
                                </el-main>
                                <el-main class='direction-container-column'>
                                    <el-button circle size='mini' class='direction-btn'

                                               @mousedown.native='mouseDownPTZControl($event,"下","start")'
                                               @mouseup.native='mouseDownPTZControl($event,"下","end")'
                                               @mouseleave.native='mouseLeave($event)'>
                                        <i class='el-icon-caret-bottom' style=' color: white;'></i>
                                    </el-button>
                                </el-main>

                                <el-main class='direction-container-column'>
                                    <el-button circle size='mini' class='direction-btn'

                                               @mousedown.native='mouseDownPTZControl($event,"右下","start")'
                                               @mouseup.native='mouseDownPTZControl($event,"右下","end")'
                                               @mouseleave.native='mouseLeave($event)'>
                                        <i class='el-icon-caret-bottom'
                                           style=' transform: rotate(-45deg); color: white;'></i>
                                    </el-button>
                                    <!--                <i class='el-icon-caret-right' style='transform:rotate(45deg);color: white; margin-bottom:8px;margin-right: 18px'></i>-->
                                </el-main>
                            </el-main>
                        </el-main>


                    </el-main>

                </el-main>
                <!--        控制摄像头 速度 变倍变焦 光圈的容器-->
                <el-main style='padding: 0; height: 300px; margin-top: 20px; margin-left: 10px; width: 200px;'>
                    <el-row class='add-sub-row'>
                        <el-col :span='7'><span class='add-sub-title'>变倍</span></el-col>
                        <el-col :span='8'>
                            <!--              变倍+按钮-->
                            <el-button class='add-sub-btn'
                                       @mousedown.native='mouseDownPTZZoom("+","start")'
                                       @mouseup.native='mouseDownPTZZoom("+","end")'
                                       @mouseleave='mouseLeave($event)'>+
                            </el-button>
                        </el-col>
                        <el-col :span='4'>
                            <!--              变倍-按钮-->
                            <el-button class='add-sub-btn'
                                       @mousedown.native='mouseDownPTZZoom("-","start")'
                                       @mouseup.native='mouseDownPTZZoom("-","end")'
                                       @mouseleave='mouseLeave($event)'>-
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-row class='add-sub-row'>
                        <el-col :span='7'><span class='add-sub-title'>光圈</span></el-col>
                        <el-col :span='8'>
                            <el-button class='add-sub-btn'
                                       @mousedown.native='mouseDownPTZIris("+","start")'
                                       @mouseup.native='mouseDownPTZIris("+","end")'
                                       @mouseleave='mouseLeave($event)'>+
                            </el-button>
                        </el-col>
                        <el-col :span='4'>
                            <el-button class='add-sub-btn'
                                       @mousedown.native='mouseDownPTZIris("-","start")'
                                       @mouseup.native='mouseDownPTZIris("-","end")'
                                       @mouseleave='mouseLeave($event)'>-
                            </el-button>
                        </el-col>

                    </el-row>
                    <el-row class='add-sub-row'>
                        <el-col :span='7'><span class='add-sub-title'>变焦</span></el-col>
                        <el-col :span='8'>
                            <el-button class='add-sub-btn'
                                       @mousedown.native='mouseDownPTZFocus("+","start")'
                                       @mouseup.native='mouseDownPTZFocus("+","end")'
                                       @mouseleave='mouseLeave($event)'>+
                            </el-button>
                        </el-col>
                        <el-col :span='4'>
                            <el-button class='add-sub-btn'
                                       @mousedown.native='mouseDownPTZFocus("-","start")'
                                       @mouseup.native='mouseDownPTZFocus("-","end")'
                                       @mouseleave='mouseLeave($event)'>-
                            </el-button>
                        </el-col>

                    </el-row>
                    <el-row style='height: 40px; margin-top: 10px; margin-left: 10px; overflow: hidden;'>
                        <el-col :span='6'><span
                            style='color: white; height: 40px; line-height: 40px; margin-top: 10px; margin-left: 10px;'>速度</span>
                        </el-col>
                        <el-col :span='10'>
                            <el-slider :show-tooltip='false' v-model='Speed' :max=7 :min=1
                                       style='height: 16px; width: 90px; line-height: 20px; margin-left: 10px; padding: 0;'></el-slider>
                        </el-col>
                        <el-col :span='8'><span
                            style='color: white; height: 40px; line-height: 40px; margin-left: 30px;'>{{ Speed }}</span>
                        </el-col>

                    </el-row>
                    <el-row class='add-sub-row'>
                        <el-col style="margin-top: 10px; margin-left: 5px;">
                            <el-button size="small" type="primary" style="background-color: #333744;"
                                       @click="returnpage" v-if="checkid">返回
                            </el-button>
                            <el-button size="small" type="primary" @click="beginPic"
                                       style="margin-left: 25px; background-color: #333744;" v-if="checkid"> 视频录制
                            </el-button>
                            <!--                            <el-input v-model="this.htid" ></el-input>-->
                        </el-col>
                        <el-col style="margin-top: 10px; margin-left: 5px;">
                            <el-button size="small" type="primary" @click="startVideoTime"
                                       style="background-color: #333744;" v-if="checkunload"> {{msg}}
                            </el-button>
<!--                            <el-button size="small" type="primary" @click="endVideoTime"-->
<!--                                       style="margin-left: 25px; background-color: #333744;" v-if="checkunload"> 结束录制-->
<!--                            </el-button>-->
                        </el-col>
                    </el-row>
                </el-main>

            </el-main>


            <!--        <div style='background-color: yellow;height:50%' >-->
            <!--          <div class='menu-title'></div>-->

            <!--        </div>-->
            <!--      </el-main>-->

        </el-aside>
    </el-container>

</template>
<script>
    import $ from 'jquery'
    import {WebVideoCtrl} from '../../plugins/WebVideoCtrl'
    import {DownloadEvidenceVideo, DownloadVideoPic, GetDeviceListStruct,GetDeviceInfo, GetCameraList} from '@/api/parkUnloadApi';
    import moment from 'moment';
    import OrgTree from './OrgTree';
    // import VideoSinglePlayer from '@/components/SingleVideoPlayer'
    export default {
        name: "video-player",
        components: {
            OrgTree
            // VideoSinglePlayer
        },
        data() {
            return {
                htid: '',
                msg: '开始录制',
                status: 0,
                archiveId: '',
                checkid: false,
                checkunload: false,
                currentNode: null,
                deviceInfo: {},
                beginTime: '',
                endTime: '',
                cameraInfoList://IP:相机IP地址，Port:相机端口，UserName:登录用户名，PassWord:登录密码，ChannelNo:通道编号，StreamType:码流类型
                    {
                        IP: '192.168.1.90',
                        // IP: '192.168.83.170',
                        // deviceIp: '192.168.1.90',
                        // deviceIp: '192.168.83.170',
                        Port: 37777,
                        UserName: 'admin',
                        PassWord: 'Admin12345',
                        LoginSuccess: false,
                        CameraDetail: [
                            // {
                            //     ChannelNo: 0,
                            //     ChannelName: '摄像头001',
                            //     ChannelIp: '192.168.83.188',
                            //     StreamType: 1,
                            //     WinId: 0
                            // },
                            // {
                            //     ChannelNo: 1,
                            //     ChannelName: '摄像头002',
                            //     ChannelIp: '192.168.1.26',
                            //     StreamType: 1,
                            //     WinId: 1
                            // },
                            // {
                            //     ChannelNo: 2,
                            //     ChannelName: '摄像头003',
                            //     ChannelIp: '192.168.1.27',
                            //     StreamType: 1,
                            //     WinId: 2
                            // },
                            // {
                            //     ChannelNo: 3,
                            //     ChannelName: '摄像头004',
                            //     ChannelIp: '192.168.1.28',
                            //     StreamType: 1,
                            //     WinId: 3
                            // },
                            // {
                            //     ChannelNo: 4,
                            //     ChannelName: '摄像头001',
                            //     ChannelIp: '192.168.1.29',
                            //     StreamType: 1,
                            //     WinId: 4
                            // },
                            // {
                            //     ChannelNo: 5,
                            //     ChannelName: '摄像头001',
                            //     ChannelIp: '192.168.1.130',
                            //     StreamType: 1,
                            //     WinId: 5
                            // },
                            // {
                            //     ChannelNo: 6,
                            //     ChannelName: '摄像头001',
                            //     ChannelIp: '192.168.1.130',
                            //     StreamType: 1,
                            //     WinId: 6
                            // },
                            // {
                            //     ChannelNo: 7,
                            //     ChannelName: '摄像头001',
                            //     ChannelIp: '192.168.83.188',
                            //     StreamType: 1,
                            //     WinId: -1
                            // }
                        ]
                    }

                ,
                WinNum: 1,//监控视频窗口数量
                Speed: 4,//云台控制速度
                //当前选择的窗口的摄像头信息
                SelectedCameraInfo: {
                    ChannelNo: 0,
                    ChannelName: '',
                    ChannelIp: '',
                    StreamType: -1,
                    WinId: -1
                }

            }
        },
        created() {
            this.status = 0;
            this.msg = '开始录制';
            this.getParams();
        },
        mounted() {
            try {
                console.log('this.$refs.videoPlugin1')
                console.log(this.$refs.videoPlugin1)
                console.log('高度')
                console.log(this.$refs.videoPlugin1.$el.children[0].offsetHeight);
                setTimeout(() => {
                    // debugger
                    let m = WebVideoCtrl.insertPluginObject('videoPlugin', this.$refs.videoPlugin1.$el.children[0].offsetWidth, this.$refs.videoPlugin1.$el.children[0].offsetHeight)
                    if (m) {
                        //初始化插件
                        var num = this.WinNum
                        WebVideoCtrl.initPlugin(function () {
                                // //设置视频窗口的显示
                                // var num = 1;
                                //  console.log(num);
                                //设置窗口分割数
                                WebVideoCtrl.setSplitNum(num)
                                //设置双击可全屏功能
                                WebVideoCtrl.enablePreviewDBClickFullSreen(true)
                            }
                        )
                        var _this = this
                        //点击显示视频窗口执行事件
                        WebVideoCtrl.addEventListener('ReturnWindInfo', function (eventParam) {
                            var winID = eventParam['winID']
                            console.log('winid')
                            console.log(winID)
                            _this.cameraInfoList.CameraDetail.find((item) => {
                                console.log(item.WinId)
                                if (item.WinId == winID) {
                                    _this.SelectedCameraInfo.ChannelIp = item.ChannelIp;
                                    _this.SelectedCameraInfo.ChannelNo = item.ChannelNo
                                    _this.SelectedCameraInfo.ChannelName = item.ChannelName
                                    _this.SelectedCameraInfo.WinId = winID
                                }

                            })
                            console.log(_this.SelectedCameraInfo)

                        })
                        this.login()
                        this.player()
                    }
                }, 1000);
                // WebVideoCtrl.insertPluginObject('videoPlugin', this.$refs.videoPlugin1.$el.children[0].offsetWidth, this.$refs.videoPlugin1.$el.children[0].offsetHeight)


            } catch (ex) {
                console.log(ex)
            }
        },

        methods: {
            startVideoTime() {
                // debugger
                if (this.status ===0){
                    this.beginTime = moment().format('YYYY-MM-DD HH:mm:ss');
                    if (this.currentNode ==null || this.currentNode.length > 1 ) {
                        this.$message({
                            message: '请选择左侧一个摄像头',
                            type: 'error'
                        });
                    }else {
                        this.$message({
                            message: '开始录制',
                            type: 'success'
                        });
                        this.status = 1;
                        this.msg = '停止录制';
                        return
                    }
                }

                if (this.status === 1){
                    this.endTime = moment().format('YYYY-MM-DD HH:mm:ss');
                    this.status = 2;
                    this.msg = '上传';
                    this.$message({
                        message: '录制完成',
                        type: 'success'
                    });
                    return;
                }

                if (this.status === 2 ){
                    this.endVideoTime();
                }


            },
            endVideoTime() {

                let param =
                    {
                        archiveId: this.archiveId,
                        deviceInfoList: this.currentNode,
                        // deviceInfoList:[{"deviceIp":"192.168.83.188","channelNo":0}],
                        // deviceInfoList:[{"deviceIp":"192.168.1.26","channelNo":0}],
                        startTime: this.beginTime,
                        endTime: this.endTime,
                        inputUserId: 1
                    };
                // if (param.deviceInfoList == null) {
                //     this.$message({
                //         message: '请选择左侧摄像头',
                //         type: 'error'
                //     });
                // }
                console.log("查看param");
                console.log(param);
                DownloadEvidenceVideo(param).then(res => {
                    if (res.res.DownloadEvidenceVideo == "已加入下载任务") {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        });
                        this.status = 0;
                        this.msg = '开始录制'
                    }
                }).catch(err => {
                    console.log(err);
                    this.$message({
                        message: '',
                        type: 'error'
                    });
                });

            },
            handleNodeClick(data) {
                // debugger
                this.currentNode = data;
                // this.loadRemoteData();
                console.log("查看列表");
                console.log(this.currentNode);
            },
            getParams() {
                // debugger
                if (this.$route.query.idtest !== "0" && this.$route.query.idtest) {
                    console.log(this.$route.query.idtest)
                    this.htid = this.$route.query.idtest;
                    this.checkid = true;
                }

                if (this.$route.query.archiveId != "0" && this.$route.query.archiveId) {
                    console.log(this.$route.query.archiveId);
                    this.archiveId = this.$route.query.archiveId;
                    this.checkunload = true;
                }
                // if (this.htid != null || this.htid !== '' || this.htid !== undefined){
                //     this.checkid = true;
                // }
                GetDeviceListStruct().then(res => {
                    debugger
                    // console.log(res.res.PlacedCaseSummaryTable);
                    // this.src = res.res.PlacedCaseSummaryTable;
                    // this.dialogVisible = true;
                    this.deviceInfo = res.res.GetDeviceListStruct;
                    this.cameraInfoList.IP = this.deviceInfo.IP;
                    this.cameraInfoList.Port = this.deviceInfo.Port;
                    this.cameraInfoList.UserName = this.deviceInfo.UserName;
                    this.cameraInfoList.PassWord = this.deviceInfo.PassWord;
                    for (let i = 0; i < this.deviceInfo.CameraDetail.length; i++) {
                        this.cameraInfoList.CameraDetail[i] = this.deviceInfo.CameraDetail[i]
                    }
                }).catch(err => {
                    console.log(err);
                    this.$message({
                        message: '失败！',
                        type: 'error'
                    });
                });
            },
            beginPic() {
                let param =
                    {
                        entranceId: this.htid,
                        deviceInfoList: this.currentNode,
                        // deviceInfoList:[{"deviceIp":"192.168.83.188","channelNo":0}],
                        // deviceInfoList:[{"deviceIp":"192.168.1.26","channelNo":0}],
                        startTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                        endTime: moment().add(10, 'second').format('YYYY-MM-DD HH:mm:ss'),
                        inputUserId: 1
                    };
                if (param.deviceInfoList == null) {
                    this.$message({
                        message: '请选择左侧摄像头',
                        type: 'error'
                    });
                } else {
                    console.log("查看param");
                    console.log(param);
                    DownloadVideoPic(param).then(res => {
                        if (res.res.DownloadVideoPic == "已加入下载任务") {
                            this.$message({
                                message: '正在下载',
                                type: 'success'
                            });
                        }
                    }).catch(err => {
                        console.log(err);
                        this.$message({
                            message: '',
                            type: 'error'
                        });
                    });
                }


            },
            returnpage() {
                this.$router.replace('/information-query/vehicle-illegal-confirm');
                console.log(this.htid);
            },
            test: function () {
                console.log('WebVideoCtrl0000000000')
                console.log(WebVideoCtrl)
            },
            setWinNum(winNum) {
                console.log('winNum数量：' + winNum)
                this.WinNum = winNum
                WebVideoCtrl.setSplitNum(winNum)
                this.login()
                this.player()
            },
            fullScreen: function () {
                WebVideoCtrl.setFullscreen()
            },
            startRecord: function () {
                var winID = WebVideoCtrl.getSelectedWinID()
                WebVideoCtrl.controlRecordingVideo(winID, true)
            },
            login: function () {
                debugger
                var ret = WebVideoCtrl.login(this.cameraInfoList.IP, this.cameraInfoList.Port, this.cameraInfoList.UserName, 'Admin12345', 0)
                if (ret == 0) {
                    this.cameraInfoList.LoginSuccess = true
                    console.log(this.cameraInfoList.IP + ':login successed')

                } else {
                    this.$message.error('登录失败')
                    console.log(this.cameraInfoList.IP + ':login failed: ' + ret)
                }
                console.log(this.cameraInfoList)

            },
            player: function () {
                if (this.cameraInfoList.LoginSuccess) {
                    //遍历视频信息列表进行播放,仅登录成功才可播放
                    for (var i = 0; i < (this.WinNum <= this.cameraInfoList.CameraDetail.length ? this.WinNum : this.cameraInfoList.CameraDetail.length); i++) {
                        this.cameraInfoList.CameraDetail[i].WinID = i
                        WebVideoCtrl.connectRealVideo(this.cameraInfoList.CameraDetail[i].ChannelNo, this.cameraInfoList.CameraDetail[i].StreamType)
                        console.log(this.cameraInfoList.CameraDetail[i].ChannelIp + '播放')
                    }

                }

            },
            //鼠标离开按钮强制失去焦点
            mouseLeave: function (evt) {
                let target = evt.target
                console.log(evt)
                console.log(target)
                if (target.nodeName == 'SPAN') {
                    target = evt.target.parentNode
                }
                target.blur()
                // target.style.backgroundColor="black";
            },
            //按下鼠标控制云台转动
            mouseDownPTZControl: function (evt, direction, startOrEnd) {

                var iChannel = this.SelectedCameraInfo.ChannelNo
                //获得移动速度
                var speed = this.Speed
                console.log('iChannel')
                console.log(iChannel)
                // return
                switch (direction) {
                    case '左上': {
                        // if(startOrEnd=="start")
                        if (startOrEnd == 'start')//flag=0开始移动
                        {
                            WebVideoCtrl.Ptz_moveUpperLeft(iChannel, speed, speed, 0)
                        } else//flag=1停止移动
                        {
                            WebVideoCtrl.Ptz_moveUpperLeft(iChannel, speed, speed, 1)
                        }
                        console.log(direction + startOrEnd)
                        break;
                    }

                    case '上': {
                        if (startOrEnd == 'start') {
                            WebVideoCtrl.Ptz_moveUpwards(iChannel, speed, 0)
                        } else {
                            WebVideoCtrl.Ptz_moveUpwards(iChannel, speed, 1)
                        }
                        console.log(direction + startOrEnd)
                        break;
                    }

                    case '右上': {
                        if (startOrEnd == 'start') {
                            WebVideoCtrl.Ptz_moveUpperRight(iChannel, speed, speed, 0)
                        } else {
                            WebVideoCtrl.Ptz_moveUpperRight(iChannel, speed, speed, 1)
                        }
                        console.log(direction + startOrEnd)
                        break;
                    }

                    case '左': {
                        if (startOrEnd == 'start') {
                            WebVideoCtrl.Ptz_moveLeft(iChannel, speed, 0)
                        } else {
                            WebVideoCtrl.Ptz_moveLeft(iChannel, speed, 1)
                        }
                        console.log(direction + startOrEnd)
                        break;
                    }

                    case '右': {
                        if (startOrEnd == 'start') {
                            WebVideoCtrl.Ptz_moveRight(iChannel, speed, 0)
                        } else {
                            WebVideoCtrl.Ptz_moveRight(iChannel, speed, 1)
                        }
                        console.log(direction + startOrEnd)
                        break;
                    }

                    case '左下': {
                        if (startOrEnd == 'start') {
                            WebVideoCtrl.Ptz_moveLowerLeft(iChannel, speed, speed, 0)
                        } else {
                            WebVideoCtrl.Ptz_moveLowerLeft(iChannel, speed, speed, 1)
                        }
                        console.log(direction + startOrEnd)
                        break;
                    }

                    case '下': {
                        if (startOrEnd == 'start') {
                            WebVideoCtrl.Ptz_moveLower(iChannel, speed, 0)
                        } else {
                            WebVideoCtrl.Ptz_moveLower(iChannel, speed, 1)
                        }
                        console.log(direction + startOrEnd)
                        break;
                    }

                    case '右下': {
                        if (startOrEnd == 'start') {
                            WebVideoCtrl.Ptz_moveLowerRight(iChannel, speed, speed, 0)
                        } else {
                            WebVideoCtrl.Ptz_moveLowerRight(iChannel, speed, speed, 1)
                        }
                        console.log(direction + startOrEnd)
                        break;
                    }

                }

            },
            //  按下鼠标控制变倍放大缩小
            mouseDownPTZZoom: function (addOrSub, startOrEnd) {
                var iChannel = this.SelectedCameraInfo.ChannelNo
                //获得移动速度
                var speed = this.Speed
                switch (addOrSub + startOrEnd) {
                    case '+start':
                        WebVideoCtrl.Ptz_controlZoom(iChannel, speed, 0, 0)//flag=0表示变倍+，flag1=0表示变倍+开始
                        break;
                    case '+end':
                        WebVideoCtrl.Ptz_controlZoom(iChannel, speed, 0, 1)//flag=0表示变倍+，flag1=1表示变倍+结束
                        break;
                    case '-start':
                        WebVideoCtrl.Ptz_controlZoom(iChannel, speed, 1, 0)//flag=0表示变倍-，flag1=0表示变倍+开始
                        break;
                    case '-end':
                        WebVideoCtrl.Ptz_controlZoom(iChannel, speed, 1, 0)//flag=0表示变倍-，flag1=1表示变倍-结束
                        break;
                }

            },
            //  按下鼠标控制光圈放大缩小
            mouseDownPTZIris: function (addOrSub, startOrEnd) {
                var iChannel = this.SelectedCameraInfo.ChannelNo
                //获得移动速度
                var speed = this.Speed
                switch (addOrSub + startOrEnd) {
                    case '+start':
                        WebVideoCtrl.Ptz_controlAperture(iChannel, speed, 0, 0)//flag=0表示光圈+，flag1=0表示光圈+开始
                        break;
                    case '+end':
                        WebVideoCtrl.Ptz_controlAperture(iChannel, speed, 0, 1)//flag=0表示光圈+，flag1=1表示光圈+结束
                        break;
                    case '-start':
                        WebVideoCtrl.Ptz_controlAperture(iChannel, speed, 1, 0)//flag=0表示光圈-，flag1=0表示光圈+开始
                        break;
                    case '-end':
                        WebVideoCtrl.Ptz_controlAperture(iChannel, speed, 1, 0)//flag=0表示光圈-，flag1=1表示光圈-结束
                        break;
                }

            },
            //  按下鼠标控制变焦放大缩小
            mouseDownPTZFocus: function (addOrSub, startOrEnd) {
                var iChannel = this.SelectedCameraInfo.ChannelNo
                //获得移动速度
                var speed = this.Speed
                switch (addOrSub + startOrEnd) {
                    case '+start':
                        WebVideoCtrl.Ptz_controlFocus(iChannel, speed, 0, 0)//flag=0表示变焦+，flag1=0表示变焦+开始
                        break;
                    case '+end':
                        WebVideoCtrl.Ptz_controlFocus(iChannel, speed, 0, 1)//flag=0表示变焦+，flag1=1表示变焦+结束
                        break;
                    case '-start':
                        WebVideoCtrl.Ptz_controlFocus(iChannel, speed, 1, 0)//flag=0表示变焦-，flag1=0表示变焦+开始
                        break;
                    case '-end':
                        WebVideoCtrl.Ptz_controlFocus(iChannel, speed, 1, 0)//flag=0表示变焦-，flag1=1表示变焦-结束
                        break;
                }

            },

        }

        ,

        computed: {
            menuTreeData: function () {

                console.log('计算属性menuTreeData')

            }

        }
    }
</script>
<style scoped>
    /* 最左侧侧边栏容器 */
    .aside-container {
        background-color: black;
        width: 240px;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
    }

    /* 方向盘最外部容器 */
    .steering-wheel-container {
        padding: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-item: center;
        margin-top: 10px;
    }

    /* 方向盘外部的圈 */
    .circular-ring {
        background-color: black;
        border-radius: 50%;
        border: 15px solid #112c3e;
        height: 200px;
        flex: 0 0 200px;
        padding: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    /* 方向盘所有方向图标的行容器，三行三列九宫格形式 */
    .direction-container-row {
        height: 47px;
        width: 141px;
        justify-content: space-around;
        display: flex;
        flex-direction: row;
        padding: 0;
    }

    /* 方向盘所有方向图标的容器 */
    .direction-container {
        height: 141px;
        flex: 0 0 141px;
        position: relative;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* 方向盘单个方向图标的容器，三行三列九宫格形式 */
    .direction-container-column {
        height: 47px;
        flex: 0 0 47px;
        padding: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    /* 方向盘中间的图标 */
    .center-img-container {
        height: 47px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex: 0 0 47px;
        padding: 0;
        background-color: #666;
        border-radius: 50%;
        border: 5px solid green;
    }
    . img {
        height: 42px;
        flex: 0 0 42px;
        padding: 0;
        text-align: center;
        overflow: hidden;
    }
    .direction-btn {
        background-color: black;
        font-size: 20px;
        border: none;
        padding: 0;
    }

    /* 鼠标移入改变背景色 */
    .direction-btn:hover {
        background-color: #3f9eff;

        /* color: #fff; */
        border-color: #3f9eff;
    }
    .menu-title {
        height: 30px;
        width: 220px;
        color: white;
        font-size: 18px;
        background-color: black;
        border-bottom: 1px solid green;
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
        padding-left: 10px;
    }
    .add-sub-row {
        margin-top: 10px;
        margin-left: 10px;
        overflow: hidden;
    }
    .add-sub-btn {
        font-size: 18px;
        padding: 0;
        color: white;
        height: 25px;
        width: 30px;
        border-radius: 10px;
        line-height: 18px;
        border-color: #415284;
        background-color: #333744;
    }
    .add-sub-title {
        margin-left: 10px;
        font-size: 16px;
        color: white;
        line-height: 20px;
    }

    /* .center-control-icon{ */

    /* } */

</style>
